<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
  button.active{
    background-color: red;
  }
  .box{
    height: 360px;
    font-size: 60px;
    border: 1px solid;
    text-align: center;
    line-height: 200px;
  }
</style>
<body>
<div id="app">
  <button
    v-for="(item,index) in arr" 
    :class="{active: num===index}" 
    @click="add(index)"
    :key="item.title">
    {{item.title}}
  </button><br>
  <img
    v-for="(nav,index) in arr"
    :src="nav.piv"
    class="box" 
    v-show="num===index"/>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
const vm = new Vue ( {
  el: '#app',
  data: {
    num: 0,
    arr: [
      {
        title: '兔子',
        piv: 'https://i04piccdn.sogoucdn.com/1fbdd5ce9449d907'
      },
      {
        title: '蘑菇',
        piv: 'https://i04piccdn.sogoucdn.com/77e41307bd9ad15c'
      },
      {
        title: '雪人',
        piv: 'https://i02piccdn.sogoucdn.com/63de050e6e82cf6f'
      },
      {
        title: '竹子',
        piv: 'https://i01piccdn.sogoucdn.com/d5a4eb2514deaaa8'
      },
      {
        title: '风车',
        piv: 'https://i02piccdn.sogoucdn.com/149200af8f9ac4e2'
      },
      {
        title: '蛋糕',
        piv: 'https://i03piccdn.sogoucdn.com/99f202b26464cbfa'
      },
      {
        title: '小狗',
        piv: 'https://i01piccdn.sogoucdn.com/622259d6a1a6731d'
      },
      {
        title: '小花',
        piv: 'https://i04piccdn.sogoucdn.com/db4b61aa3123aad2'
      },
    ]
  },
  methods: {
    add(n){
      this.num=n
    }
  }
} )
</script>
</html>